import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js'
import MarkdownPro from '@/components/markdown/pro';
import UploadAdapter from '@/utils/Uploader.js';
import  {quillEditor, Quill} from 'vue-quill-editor'
import { container, ImageExtend } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import requestConfig from '@/api/config.js';
let baseURL = requestConfig[process.env.NODE_ENV].api
Vue.use( CKEditor );
Vue.use(quillEditor);
export default {
  components: {
    ckeditor: CKEditor.component,
    MarkdownPro,
    quillEditor
  },
  data() {
    return {
      toolbarTips: [
        {Choice:'.ql-bold',title:'加粗'},
        {Choice:'.ql-italic',title:'倾斜'},
        {Choice:'.ql-underline',title:'下划线'},
        {Choice:'.ql-header',title:'段落格式'},
        {Choice:'.ql-strike',title:'删除线'},
        {Choice:'.ql-blockquote',title:'块引用'},
        {Choice:'.ql-code-block',title:'插入代码段'},
        {Choice:'.ql-size',title:'字体大小'},
        {Choice:'.ql-list[value="ordered"]',title:'编号列表'},
        {Choice:'.ql-list[value="bullet"]',title:'项目列表'},
        {Choice:'.ql-header[value="1"]',title:'h1'},
        {Choice:'.ql-header[value="2"]',title:'h2'},
        {Choice:'.ql-align',title:'对齐方式'},
        {Choice:'.ql-color',title:'字体颜色'},
        {Choice:'.ql-background',title:'背景颜色'},
        {Choice:'.ql-image',title:'图像'},
        {Choice:'.ql-video',title:'视频'},
        {Choice:'.ql-link',title:'添加链接'},
        {Choice:'.ql-formula',title:'插入公式'},
        {Choice:'.ql-clean',title:'清除格式'},
        {Choice:'.ql-indent[value="-1"]',title:'向左缩进'},
        {Choice:'.ql-indent[value="+1"]',title:'向右缩进'},
        {Choice:'.ql-header .ql-picker-label',title:'标题大小'},
        {Choice:'.ql-header .ql-picker-item[data-value="1"]',title:'标题一'},
        {Choice:'.ql-header .ql-picker-item[data-value="2"]',title:'标题二'},
        {Choice:'.ql-header .ql-picker-item[data-value="3"]',title:'标题三'},
        {Choice:'.ql-header .ql-picker-item[data-value="4"]',title:'标题四'},
        {Choice:'.ql-header .ql-picker-item[data-value="5"]',title:'标题五'},
        {Choice:'.ql-header .ql-picker-item[data-value="6"]',title:'标题六'},
        {Choice:'.ql-header .ql-picker-item:last-child',title:'标准'},
        {Choice:'.ql-size .ql-picker-item[data-value="small"]',title:'小号'},
        {Choice:'.ql-size .ql-picker-item[data-value="large"]',title:'大号'},
        {Choice:'.ql-size .ql-picker-item[data-value="huge"]',title:'超大号'},
        {Choice:'.ql-size .ql-picker-item:nth-child(2)',title:'标准'},
        {Choice:'.ql-align .ql-picker-item:first-child',title:'居左对齐'},
        {Choice:'.ql-align .ql-picker-item[data-value="center"]',title:'居中对齐'},
        {Choice:'.ql-align .ql-picker-item[data-value="right"]',title:'居右对齐'},
        {Choice:'.ql-align .ql-picker-item[data-value="justify"]',title:'两端对齐'}
      ],
      editor: ClassicEditor,
      editorData: '<p>Content of the editor.</p>',
      editorConfig: null,
      editorHtml: true,
      editorOption: {
        placeholder: "",
        theme: "snow", // or 'bubble'
        placeholder: "您想说点什么？",
        ImageExtend: {
          loading: true,  // 可选参数 是否显示上传进度和提示语
          name: 'location',  // 图片参数名
          size: 3,  // 可选参数 图片大小，单位为M，1M = 1024kb
          action: baseURL+"/object/richtext/image/upload/",  // 服务器地址, 如果action为空，则采用base64插入图片
          // response 为一个函数用来获取服务器返回的具体图片地址
          // 例如服务器返回{code: 200; data:{ url: 'xxx.com'}}
          // 则 return res.data.url
          response: (res) => {
            console.log(res);
            return data.url
          },
          headers: (xhr) => {},  // 可选参数 设置请求头部
          start: () => {},  // 可选参数 自定义开始上传触发事件
          end: () => {},  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
          error: () => {},  // 可选参数 自定义网络错误触发的事件
          change: (xhr, formData) => {} // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
        },
        toolbar: {
          container: container,  // container为工具栏，此次引入了全部工具栏，也可自行配置
          handlers: {
            image: function(value) {
              if (value) {
                document.querySelector('#upload').click()  // 劫持原来的图片点击按钮事件
              } else {
                this.quill.format('image', false)
              }
            }
          }
        }
      },
    }
  },
  watch: {
    editorHtml(value) {
      this.data.detail_type = value ? 'H' : 'M'
    }
  },
  created() {
    // 在 created 钩子中设置 editorConfig
    this.editorConfig = {
      language: "zh-cn",
      // extraPlugins: [this.uploader],
    };
  },
  mounted() {
    // console.log('~CKEditor', CKEditor)
    // console.log('~ClassicEditor', ClassicEditor)
    autotip:{
      // document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
      for(let item of this.toolbarTips){
        let tip = document.querySelector('.quill-editor '+ item.Choice)
        if (!tip) continue
        tip.setAttribute('title',item.title)
      }
    }
  },
  methods: {
    change(e) {
      let file = e.target.files[0]
      const formData = new FormData()
      formData.append('file', file)
    },
    uploader(editor) {
      editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        return new UploadAdapter(loader);
      };
    },
  }
}